<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框案例</title>
		<style>
			/* 练习:1圆形  2正三角形
			思路一:宽高与思路倒角一致*/
		   div#cirle{
			   width: 400px;
			   height: 400px;
			   border: 1px solid brown;
			   border-radius: 50%;
			   /* 边框阴影 box-shadow  属性 */
			   box-shadow: 5px 5px 50px 50px brown inset;
		   }
		   /* 
			思路二: div# triangle
				 css中:抓到 div    [斜线]
				 左边框  50像素实线红色
				右边框  50像素实线黄色
				下边框  50像素实线黑色
			注意:先别加宽高   transparent    透明色*/
		  div#triangle{
			   width: 0;
			/*   border-left: 50px solid transparent;
			   border-right: 50px solid transparent;
			   border-bottom: 50px solid black;*/
			   /* 两行：倒三角蓝色，透明度  .3 
			   提醒：所有边框：50px solid transparent
			   上边框颜色改变成蓝色   0，0，255
			   */
			  border: 50px solid transparent;
			  border-right-color: rgba(0, 0, 255, .3);  
		   }
		   /* outline   边框轮廓  只针对input  元素 */
		   input{
			   outline:1px solid red;
		   }
		   /* 实际应用：通配选择器 去掉轮廓
			*{outline 0}
			 */
		</style>
	</head>
	<body>
		<div id="cirle"></div>
		<div id="triangle"></div>
		边框：<input type="text" >
	</body>
</html>